<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>HTML 5 WYSIWYG Editor</title>
		<link type="text/css" href="css/cupertino/jquery-ui-1.8.12.custom.css" rel="stylesheet" />	
		<link type="text/css" href="h5w/h5w.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
		<script type="text/javascript" src="h5w/h5w.js"></script>
		
	<style>
		.xv-to-remove, .xv-without-html {
			background-color: #fefcf5;
			border:1px solid #000;
			padding:5px;
		}
	</style>
		<script type="text/javascript">
			$(function(){
			 
				if(location.protocol == "file:"){
					var Content = "You must run this on http server";
					 alert(Content);
					}else {
						var Content = ($.ajax({
								url: "exampletext.html",
								dataType: "text",
								async: false
						}).responseText);
				}
				// This class is example - i use this to my project - XVweb
				var XVwebFormater = {
					parseReturnedXML : function(strToParse, strStart){
											var str = strToParse.match(new RegExp("<"+strStart+"[^<]*(?:(?!<\/"+strStart+">)<[^<]*)*<\/"+strStart+">", "gi"));
											if (str != null) 
											return str;
											return [];
										},
					htmlspecialchars : function(p_string) {
											p_string = p_string.replace(/&/g, '&amp;');
											p_string = p_string.replace(/</g, '&lt;');
											p_string = p_string.replace(/>/g, '&gt;');
											return p_string;
										},
					htmlspecialchars_decode : function(p_string) {
												p_string = p_string.replace(/&amp;/g, '&');
												p_string = p_string.replace(/&lt;/g, '<');
												p_string = p_string.replace(/&gt;/g, '>');
												return p_string;
											},
					parse : 			function(text){
											var XVtags = ["include", "php", "delphi", "cpp", "java", "java5", "css", "javascript", "code", "vars", "file", "script"];
											$.each(XVtags, function(index, value) {
												$.each(XVwebFormater.parseReturnedXML(text, value), function(indexz, valuez) {
													text = text.replace(valuez, "<pre class='xv-to-remove xv-without-html'>"+XVwebFormater.htmlspecialchars(valuez)+"</pre>");
												});
											});
											return text;
										},
					DeleteFormat    : function(){
						$(this).find(".xv-without-html").html(function(index, oldhtml){
							return oldhtml.replace(/(<([^>]+)>)/ig,"");
						});
					},
					EditorToHTML : function(text){
						matchResult = text.match(new RegExp("<pre class=\"xv-to-remove[^<]*(?:(?!<\/pre>)<[^<]*)*<\/pre>", "gi"));
						if(matchResult != null){
							$.each(matchResult, function(index, value){
								text = text.replace(value, XVwebFormater.htmlspecialchars_decode(value.replace(/<pre(.*?)>/, "").replace(/<\/pre(.*?)>/, "")));
							});
						};
						
						return text;
					}
				};
				

				$("#demos").h5w({
					content :  XVwebFormater.parse(Content) ,	// here you can set content for editor
					onChange :  XVwebFormater.DeleteFormat,		// you can delete this line
					onTextarea : XVwebFormater.EditorToHTML, 	// you can delete this line
					onVisual : XVwebFormater.parse, 			// you can delete this line
				});

				$(".getresult").click(function(){
						resultEditHTML = $("#demos").getContent();
						$("#result").html(resultEditHTML);
					return false;
				});
			
			});
		</script>	
	</head>
	<body>
	<div id="demos">
	<!-- HTML5WYSIWYG Editor START --> 
		<div class="h5w-main">
			<!-- Tabs -->
			<div class="h5w-tabs">
				<ul>
					<li><a href="#MainTools">Home</a></li>
					<li><a href="#Insert">Insert</a></li>
					<li><a href="#HTMLelements">HTML elements</a></li>
				</ul>
				<div style="float:right">
					<a href="#undo" class="h5w-icon h5w-undo" data-h5w-function="undo" title="Undo"> </a>
					<a href="#redo" class="h5w-icon h5w-redo" data-h5w-function="redo" title="Redo"> </a>
					<a href="#selectall" class="h5w-icon h5w-selectall" data-h5w-function="selectall" title="Select All"> </a>
				</div>
				<div id="MainTools" class="h5w-card">
					<div class="h5w-section" >
			
						<div class="h5w-group" style="width:110px;">
								<a href="#paste" class="h5w-icon h5w-paste" data-h5w-function="paste" title="Paste">Paste</a>
								<div>
									<a href="#cut" class="h5w-icon h5w-cut" data-h5w-function="cut" title="Cut"> Cut </a> 
									<a href="#copy" class="h5w-icon h5w-copy" data-h5w-function="copy" title="Copy"> Copy </a>
								</div>
						</div>
						<div class="h5w-group-seperator"></div>
						<div class="h5w-group">
							<div style="width:200px;">
							
								<a href="#fonttype" class="h5w-icon h5w-fonttype" data-h5w-function="fonttype" title="Type font"><span style="font-family: Arial, Helvetica, sans-serif;">Arial</span></a>
								<a href="#hilitecolorpicker" class="h5w-icon-nojs h5w-fonttype-picker" data-h5w-destination=".h5w-fonttype" data-h5w-onchange-function="functions.fonttype" title="Font type picker">
									<span class="ui-icon ui-icon-triangle-2-n-s"></span>
								</a>
				
			
								<a href="#fontsize" class="h5w-icon h5w-fontsize" data-h5w-function="fontsize" title="FontSize">11</a>
								<a href="#hilitecolorpicker" class="h5w-icon-nojs h5w-fontsize-picker" data-h5w-destination=".h5w-fontsize" data-h5w-onchange-function="functions.fontsize" title="Font size picker">
									<span class="ui-icon ui-icon-triangle-2-n-s"></span>
								</a>
							</div>
			
							<div style="clear:both;">
								<a href="#bold" class="h5w-icon h5w-bold" data-h5w-function="bold" title="Bold"> </a>
								<a href="#italic" class="h5w-icon h5w-italic" data-h5w-function="italic" title="Italic"> </a>
								<a href="#underline" class="h5w-icon h5w-underline" data-h5w-function="underline" title="Underline"> </a>
								<a href="#strike" class="h5w-icon h5w-strike" data-h5w-function="strike" title="Strike"> </a>
								<a href="#subscript" class="h5w-icon h5w-subscript" data-h5w-function="subscript" title="Subscript"> </a>
								<a href="#superscript" class="h5w-icon h5w-superscript" data-h5w-function="superscript" title="Superscript"> </a>
								<a href="#seperator" class="h5w-seperator"></a>
								<br style="clear:both" />
								<a href="#fontcolor" class="h5w-icon h5w-fontcolor" data-h5w-function="fontcolor" title="Set font color"> </a>
								<a href="#fontcolorpicker" class="h5w-picker h5w-font-picker" data-h5w-destination=".h5w-font-picker" data-h5w-onchange-function="functions.fontcolor" title="Font color picker" > </a>
								<a href="#seperator" class="h5w-seperator"></a>
								<a href="#fontcolor" class="h5w-icon h5w-hilitecolor" data-h5w-function="hilitecolor" title="Highlight"> </a>
								<a href="#hilitecolorpicker" class="h5w-picker h5w-hilitecolor-picker" data-h5w-destination=".h5w-hilitecolor-picker" data-h5w-onchange-function="functions.hilitecolor" title="Highlight color picker"> </a>
								<a href="#seperator" class="h5w-seperator"></a>
								<a href="#removeformat" class="h5w-icon h5w-removeformat" data-h5w-function="removeformat" title="Remove format"> </a>
							
							</div>
						</div>
						<div class="h5w-group-seperator"></div>
						<div class="h5w-group">
		
							
								<a href="#seperator" class="h5w-seperator"></a>
							<a href="#hrule" class="h5w-icon h5w-hrule" data-h5w-function="hrule" title="Add rule - hr"> </a>
							<a href="#seperator" class="h5w-seperator" ></a>
							<a href="#listordered" class="h5w-icon h5w-listordered" data-h5w-function="listordered" title="List style - numeric"> </a>
							<a href="#listunordered" class="h5w-icon h5w-listunordered" data-h5w-function="listunordered" title="List style - bull"> </a>
			
								<a href="#seperator" class="h5w-seperator" style="clear:both;" ></a>
							<a href="#justifyleft" class="h5w-icon h5w-justifyleft" data-h5w-function="justifyleft" title="Left justify"> </a>
							<a href="#justifycenter" class="h5w-icon h5w-justifycenter" data-h5w-function="justifycenter" title="Center justify"> </a>
							<a href="#justifyright" class="h5w-icon h5w-justifyright" data-h5w-function="justifyright" title="Right justify"> </a>
					
								<a href="#seperator" class="h5w-seperator" style="clear:both;" ></a>
							<a href="#indent" class="h5w-icon h5w-indent" data-h5w-function="indent" title="Indent" > </a>
							<a href="#outdent" class="h5w-icon h5w-outdent" data-h5w-function="outdent" title="Outdent"> </a>
							<a href="#paragraph" class="h5w-icon h5w-paragraph" data-h5w-function="paragraph" title="Paragraph"> </a>
							
							
							
						</div>
						<div class="h5w-group-seperator"></div>
						<div class="h5w-group">
									<div class="h5w-style-selection h5w-style-picker">
										<a class="h5w-icon" href="#h1" data-h5w-function="formatblock">
											<div  class="h5w-style-selection-preview" >
												<h1 style="margin-top:0px;">AbCdEfGh</h1>
											</div>
											<div class="h5w-style-selection-caption" > H1 style </div>
										</a>
										<a class="h5w-icon" href="#h2" data-h5w-function="formatblock">
											<div  class="h5w-style-selection-preview" >
												<h2 style="margin-top:0px;">AbCdEfGh</h2>
											</div>
											<div class="h5w-style-selection-caption" > H2 style </div>
										</a>
										<a class="h5w-icon" href="#h3" data-h5w-function="formatblock">
											<div  class="h5w-style-selection-preview" >
												<h3 style="margin-top:0px;">AbCdEfGh</h3>
											</div>
											<div class="h5w-style-selection-caption" > H3 style </div>
										</a>
										<a class="h5w-icon" href="#h4" data-h5w-function="formatblock">
											<div  class="h5w-style-selection-preview" >
												<h4 style="margin-top:0px;">AbCdEfGh</h4>
											</div>
											<div class="h5w-style-selection-caption" > H4 style </div>
										</a>
										<a class="h5w-icon" href="#h5" data-h5w-function="formatblock">
											<div  class="h5w-style-selection-preview" >
												<h5 style="margin-top:0px;">AbCdEfGh</h5>
											</div>
											<div class="h5w-style-selection-caption" > H5 style </div>
										</a>
										<a class="h5w-icon" href="#h6" data-h5w-function="formatblock">
											<div  class="h5w-style-selection-preview" >
												<h6 style="margin-top:0px;">AbCdEfGh</h6>
											</div>
											<div class="h5w-style-selection-caption" > H6 style </div>
										</a>
										<a class="h5w-icon" href="#blockquote" data-h5w-function="formatblock">
											<div  class="h5w-style-selection-preview" style="text-align:left">
											Text Text
												<blockquote cite="http://www.bordeux.net">AbCdEfGh</blockquote>
											Text Text
											</div>
											<div class="h5w-style-selection-caption" > Blockquote </div>
										</a>
									</div>
						</div>
						<div  class="h5w-group" style="width: 20px; height:50px;">
							<a href="#toDown" class="h5w-scroll" data-h5w-scroll="-=50" data-h5w-toscroll=".h5w-style-picker">
								<div class="ui-state-default ui-corner-all ">
									<span class="ui-icon ui-icon-arrowthickstop-1-n"></span>
								</div>
							</a>
							<a href="#toDown" class="h5w-scroll" data-h5w-scroll="+=50"  data-h5w-toscroll=".h5w-style-picker">
								<div class="ui-state-default ui-corner-all" style="margin-top:10px;">
									<span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
								</div>
							</a>
						</div>
						<div class="h5w-group-seperator"></div>
					</div>
				</div>
				<div id="Insert" class="h5w-card">
					<div class="h5w-section" >
						<div class="h5w-group">
							<a href="#tablepicker" class="h5w-icon-nojs h5w-table h5w-tablepicker" data-h5w-onselect-function="functions.table" title="Insert table"> Table </a>
							<a href="#seperator" class="h5w-group-seperator"></a>
							<a href="#insertimage" class="h5w-icon h5w-insertimage" data-h5w-function="insertimage" title="Insert image"> Image </a>
							<a href="#seperator" class="h5w-group-seperator"></a>
							<a href="#createlink" class="h5w-icon h5w-createlink" data-h5w-function="createlink" title="Insert URL"> Link </a>
							<a href="#unlink" class="h5w-icon h5w-unlink" data-h5w-function="unlink" title="Remove URL from text"> Unlink </a>
						</div>
					</div>
				
				</div>
				<div id="HTMLelements" class="h5w-card">
					<div class="h5w-section"  style="width: 800px; ">
						<div class="h5w-group">
							<div class="h5w-style-inserthtml">
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert fieldset">
									<fieldset><legend>Example</legend>ExampleText</fieldset>
								</a>
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert form">
									<form action="?" method="post">HTML Form</form>
								</a>
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert text input">
									<input type="text" value="AbCdEfGh" name="name" />
								</a>
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert password input">
									<input type="password" value="AbCdEfGh" name="name" />
								</a>
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert checkbox input">
									<input type="checkbox" value="AbCdEfGh" name="name" />
								</a>
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert radio input">
									<input type="radio" value="AbCdEfGh" name="name" />
								</a>
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert submit button">
									<input type="submit" value="Submit" name="name" />
								</a>
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert button">
									<input type="button" value="Button" name="name" />
								</a>
								<a href="#inserthtml" class="h5w-icon h5w-inserthtml" data-h5w-function="inserthtml" title="Insert textarea">
									<textarea name="name"></textarea>
								</a>
		
							</div>
						</div>
						<div  class="h5w-group" style="width: 20px; height:50px;">
							<a href="#toDown" class="h5w-scroll" data-h5w-scroll="-=55" data-h5w-toscroll=".h5w-style-inserthtml">
								<div class="ui-state-default ui-corner-all ">
									<span class="ui-icon ui-icon-arrowthickstop-1-n"></span>
								</div>
							</a>
							<a href="#toDown" class="h5w-scroll" data-h5w-scroll="+=55"  data-h5w-toscroll=".h5w-style-inserthtml">
								<div class="ui-state-default ui-corner-all" style="margin-top:10px;">
									<span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
								</div>
							</a>
						</div>
					</div>
				</div>
				<div class="h5w-tabs-bottom" >
				
					<div id="h5w-id-content" class="h5w-content" contenteditable="true" spellcheck="true"></div>
					<textarea id="h5w-textarea-id" class="h5w-texarea" ></textarea>
					
					<ul>
						<li><a href="#h5w-id-content" class="h5w-refresh-editor">Visual</a></li>
						<li><a href="#h5w-textarea-id" class="h5w-refresh-textarea" >Source HTML</a></li>
					</ul>
				</div>
	
			</div>
			<div class="h5w-picker-area"> 
				<div class="h5w-picker-red"></div> 
				<div class="h5w-picker-green"></div> 
				<div class="h5w-picker-blue"></div> 
				<div class="h5w-picker-opacity"></div> 
				<div class="h5w-picker-swatch" class="ui-widget-content ui-corner-all" style="background:white;"></div> 
				<div style="clear:both" ></div>
				 
			</div>	
			<div class="h5w-tablepicker-area"></div>
			
			<div class="h5w-fontsize-picker-area"> 
				<div class="h5w-fontsize-picker-size"></div> 
				<div style="clear:both" ></div>
			</div>
			<div class="h5w-font-picker-area"> 
			
				<a href="#fonttype" class="h5w-icon h5w-font-type"  data-h5w-function="fonttype" title="Type font"><span style="font-family: Arial, Helvetica, sans-serif;">Arial</span></a>
				<a href="#fonttype" class="h5w-icon h5w-font-type"  data-h5w-function="fonttype" title="Type font"><span style="font-family: Courier new,courier,monospace">Courier New</span></a>
				<a href="#fonttype" class="h5w-icon h5w-font-type"  data-h5w-function="fonttype" title="Type font"><span style="font-family: Georgia,times new roman,times,serif">Georgia</span></a>
				<a href="#fonttype" class="h5w-icon h5w-font-type"  data-h5w-function="fonttype" title="Type font"><span style="font-family: Tahoma,arial,helvetica,sans-serif">Tahoma</span></a>
				<a href="#fonttype" class="h5w-icon h5w-font-type"  data-h5w-function="fonttype" title="Type font"><span style="font-family: Times new roman,times,serif">Times New Roman</span></a>
				<a href="#fonttype" class="h5w-icon h5w-font-type"  data-h5w-function="fonttype" title="Type font"><span style="font-family: Verdana,arial,helvetica,sans-serif">Verdana</span></a>
				<a href="#fonttype" class="h5w-icon h5w-font-type"  data-h5w-function="fonttype" title="Type font"><span style="font-family: Impact">impact</span></a>
				<a href="#fonttype" class="h5w-icon h5w-font-type"  data-h5w-function="fonttype" title="Type font"><span style="font-family: Wingdings">WingDings</span></a>
		
				<div style="clear:both" ></div>
			</div>	
			<div class="h5w-context-menu">
				<ul>
					<li><a href="#" class="h5w-icon-js h5w-c-delete" data-h5w-function="delete" data-h5w-result="true">Delete</a></li>
					<li><a href="#" class="h5w-icon-js h5w-c-cut" data-h5w-function="cut" data-h5w-result="true">Cut</a></li>
					<li><a href="#" class="h5w-icon-js h5w-c-copy" data-h5w-function="copy" data-h5w-result="true">Copy</a></li>
					<li><a href="#" class="h5w-icon-js h5w-c-paste" data-h5w-function="paste" data-h5w-result="true">Paste</a></li>
					<li><a href="#"  class="h5w-c-options">Element options</a>
						<ul class="h5w-c-options-element">
						</ul>
					</li>
					<li><a href="#" class="h5w-c-attributes">Attributes</a> 
						<ul class="h5w-c-attr">
						</ul>
					</li>
					<li><a href="#" class="h5w-c-quit h5w-c-seperator">Quit</a></li>
				</ul>
			</div>
			
		</div>
		<!-- HTML5WYSIWYG Editor END --> 
	</div>
	<a href="#" class="getresult">get result</a>
		<textarea id="result"></textarea>
	
	</body>
</html>


